<template>

    <div ref="chartRef" style="width: 100%; height: 100%"></div>
    <!-- <div class="carousel-controls">
      <button @click="prevPair" class="control-btn">&lt;</button>
      <button @click="nextPair" class="control-btn">&gt;</button>
    </div> -->

</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chart = null
const currentPairIndex = ref(0)
let autoPlayTimer = null

const teaData = {
  week: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
  green_tea: [3, 4, 5, 6, 7, 7, 8, 8, 9, 9, 9, 10],
  black_tea: [2, 3, 4, 5, 6, 6, 7, 8, 8, 8, 8, 8],
  oolong_tea: [3, 4, 5, 5, 6, 7, 7, 8, 8, 9, 9, 10],
  white_tea: [2, 3, 4, 5, 6, 6, 7, 7, 8, 8, 9, 9],
  puer_tea: [1, 2, 3, 4, 5, 6, 7, 7, 8, 9, 9, 10],
  yellow_tea: [2, 3, 4, 5, 6, 7, 7, 8, 8, 9, 9, 9]
}

const teaColors = {
  green_tea: '#7DDA58',    // 绿色
  black_tea: '#E4080A',    // 红色
  oolong_tea: '#5DE2E7',   // 青色
  white_tea: '#FFFFFF',    // 白色
  puer_tea: '#8B4513',     // 黑色
  yellow_tea: '#FFDE59'    // 黄色
}

const teaNames = {
  green_tea: '绿茶',
  black_tea: '红茶',
  oolong_tea: '青茶',
  white_tea: '白茶',
  puer_tea: '黑茶',
  yellow_tea: '黄茶'
}

const teaTypes = Object.keys(teaData).filter(key => key !== 'week')

const updateChart = () => {
  if (!chart) return

  const startIndex = currentPairIndex.value * 2
  const currentTeaTypes = teaTypes.slice(startIndex, startIndex + 2)

  const series = currentTeaTypes.map(teaType => ({
    name: teaNames[teaType],
    type: 'line',
    data: teaData[teaType],
    symbol: 'circle',
    symbolSize: 8,
    lineStyle: {
      width: 3
    },
    itemStyle: {
      color: teaColors[teaType]
    }
  }))

  const option = {
    title: {
      text: '茶叶对身体改善效果趋势对比',
      subtext: `${teaNames[currentTeaTypes[0]]} & ${teaNames[currentTeaTypes[1]]}`,
      left: 'center',
      textStyle: {
        color: '#f8e8ba',
        fontSize: 16
      },
      subtextStyle: {
        color: '#f8e8ba',
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        let result = `第${params[0].dataIndex + 1}周<br/>`
        params.forEach(param => {
          result += `${param.seriesName}: ${param.value}<br/>`
        })
        return result
      }
    },
    legend: {
      data: currentTeaTypes.map(type => teaNames[type]),
      bottom: 0,
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: teaData.week.map(week => `第${week}周`),
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      name: '改善指数',
      nameTextStyle: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },
    series: series
  }

  chart.setOption(option)
}

const nextPair = () => {
  const maxIndex = Math.floor((teaTypes.length - 1) / 2)
  currentPairIndex.value = currentPairIndex.value >= maxIndex ? 0 : currentPairIndex.value + 1
  updateChart()
}

const prevPair = () => {
  const maxIndex = Math.floor((teaTypes.length - 1) / 2)
  currentPairIndex.value = currentPairIndex.value <= 0 ? maxIndex : currentPairIndex.value - 1
  updateChart()
}

const startAutoPlay = () => {
  autoPlayTimer = setInterval(() => {
    nextPair()
  }, 3000)
}

const stopAutoPlay = () => {
  if (autoPlayTimer) {
    clearInterval(autoPlayTimer)
    autoPlayTimer = null
  }
}

onMounted(() => {
  chart = echarts.init(chartRef.value, null, {
    renderer: 'canvas',
    useDirtyRect: false
  })
  
  updateChart()
  startAutoPlay()
  
  window.addEventListener('resize', () => {
    chart?.resize()
  })
})

onUnmounted(() => {
  stopAutoPlay()
  window.removeEventListener('resize', () => {
    chart?.resize()
  })
})
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 250px;
  
  background: rgba(0, 20, 50, 0.5);
  border-radius: 8px;
  padding: 10px;
  position: relative;
}

.carousel-controls {
  position: absolute;
  bottom: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  transform: translateY(50%);
  pointer-events: none;
}

.control-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 40px;
  font-size: 18px;
  pointer-events: auto;
  transition: background-color 0.3s;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}
</style> 